import React from 'react';
import ReactEcharts from '@/components/Echarts';
import { Empty } from 'antd';

// 实际饱和度走势图
const WorkSaturationLine = ({ data = [], reportType = 1 }) => {
    const xData = [];
    const workData = [];
    const planData = [];
    data.forEach(item => {
        workData.push(item.lastActualTotalWorkloadSaturability);
        planData.push(item.lastPlanTotalWorkloadSaturability);
        let num = item.reportPeriod.split('W');
        if (Number(reportType) === 2) {
            num = item.reportPeriod.split('M');
        }
        xData.push(`第${num[1]}${reportType === 1 ? '周' : '月'}`);
    });
    const option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            x: 'left',
            y: 10,
            data: ['实际饱和度', '计划饱和度']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: 40,
            containLabel: true
        },
        dataZoom: [
            {
                bottom: 0,
                start: 0,
                end: 100,
                height: 10,
                showDetail: false,
                type: 'slider',
                xAxisIndex: 0
            }
        ],
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData,
            axisLine: {
                lineStyle: {
                    color: 'rgba(0, 0, 0, 0.1)'
                }
            },
            axisLabel: {
                interval: 0,
                rotate: 45,
                color: 'rgba(0, 0, 0, 0.45)'
            },
            splitLine: { show: false }
        },
        yAxis: {
            type: 'value',
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
                color: 'rgba(0, 0, 0, 0.45)',
                interval: 50,
                formatter: '{value}'
            }
        },
        series: [
            {
                name: '实际饱和度',
                type: 'line',
                data: workData
            },
            {
                name: '计划饱和度',
                type: 'line',
                data: planData
            }
        ]
    };

    return (
        <div style={{ height: '100%' }}>
            {data && data.length > 0 ? (
                <ReactEcharts style={{ height: '100%' }} option={option} />
            ) : (
                <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Empty />
                </div>
            )}
        </div>
    );
};

export default WorkSaturationLine;
